<template>
    <div class="FindTab">
        <van-tabs v-model="active" @click="onClick(active)">
            <van-tab :title="item" v-for="item in arr" :key="item">
                <div v-show="show==active" v-for="img in list1" :key="img.id">
                    <img width="100%" v-lazy="img.head_pic" />
                    <p style="text-align: center;line-height: 0.4rem; color: #333333;">{{img.title}}</p>
                    <p style="text-align: center;line-height: 0.4rem; color: gray;">{{img.subtitle}}</p>
                </div>
            </van-tab>
            <!-- <van-tab title="长知识">
                <div v-for="img in list1" :key="img.id">
                    <img width="100%" v-lazy="img.head_pic" />
                    <p style="text-align: center;line-height: 0.4rem; color: #333333;">{{img.title}}</p>
                    <p style="text-align: center;line-height: 0.4rem; color: gray;">{{img.subtitle}}</p>
                </div>
            </van-tab>
            <van-tab title="看世界">
                <div v-for="img in list1" :key="img.id">
                    <img width="100%" v-lazy="img.head_pic" />
                    <p style="text-align: center;line-height: 0.4rem; color: #333333;">{{img.title}}</p>
                    <p style="text-align: center;line-height: 0.4rem; color: gray;">{{img.subtitle}}</p>
                </div>
            </van-tab>
            <van-tab title="达人说">
                <div v-for="img in list1" :key="img.id">
                    <img width="100%" v-lazy="img.head_pic" />
                    <p style="text-align: center;line-height: 0.4rem; color: #333333;">{{img.title}}</p>
                    <p style="text-align: center;line-height: 0.4rem; color: gray;">{{img.subtitle}}</p>
                </div>
            </van-tab> -->
        </van-tabs>
    </div>
</template>

<script>
export default {
    data() {
        return {
            arr: ["全部", "涨知识", "看世界", "达人说"],
            active: 0,
            indexList: [1, 2],
            list1: [],
            show: 0,
            //vant
            isOk: true,
            timer: "",
            page: 2,
        };
    },
    async created() {
        // let data = await this.$API.FindAPI.GetFindId({sort_id:0})
        this.GetFind();
        window.addEventListener("scroll", this.onScroll, true);
    },
    methods: {
        onClick(val) {
            //{sort_id:0}567
            // console.log(val);
            let id = val == 0 ? val : val + 4;
            this.GetFind({ sort_id: id }, val);
        },
        async GetFind(a, val) {
            let data = await this.$API.FindAPI.GetFindId(a);
            if (data.code == 0) {
                this.list1 = this.list1.concat(data.data.list);
                // console.log(this.list1);
            }
            //减少页面渲染
            this.show = val || 0;
        },
        onScroll() {
            // console.log(111);
            let yy = this.getScrollTop();
            let hh, vv
                hh = this.getScrollHeight();
                vv = this.getWindowHeight();
            if (yy + vv > hh - 200) {
                hh = this.getScrollHeight();
                                                        //已经解决了下面目前完美代码
                if (this.isOk) {
                    this.isOk = false;
                    this.timer = setTimeout((t) => {
                        this.isOk = true;
                    }, 5000);
                    //    console.log('触底了');
                    let id = this.active == 0 ? this.active : this.active + 4;
                    
                        this.GetFind(
                            { sort_id: id, page: this.page },
                            this.active
                        );
                    this.page++;
                }
            }
        },
        //YYYY
        getScrollTop() {
            var scrollTop = 0,
                bodyScrollTop = 0,
                documentScrollTop = 0;
            if (document.body) {
                bodyScrollTop = document.body.scrollTop;
            }
            if (document.documentElement) {
                documentScrollTop = document.documentElement.scrollTop;
            }
            scrollTop =
                bodyScrollTop - documentScrollTop > 0
                    ? bodyScrollTop
                    : documentScrollTop;
            return scrollTop;
        },
        //文档高度
        getScrollHeight() {
            var scrollHeight = 0,
                bodyScrollHeight = 0,
                documentScrollHeight = 0;
            if (document.body) {
                bodyScrollHeight = document.body.scrollHeight;
            }
            if (document.documentElement) {
                documentScrollHeight = document.documentElement.scrollHeight;
            }
            scrollHeight =
                bodyScrollHeight - documentScrollHeight > 0
                    ? bodyScrollHeight
                    : documentScrollHeight;
            return scrollHeight;
        },
        //视口
        getWindowHeight() {
            var windowHeight = 0;
            if (document.compatMode == "CSS1Compat") {
                windowHeight = document.documentElement.clientHeight;
            } else {
                windowHeight = document.body.clientHeight;
            }
            return windowHeight;
        },
    },
    watch: {
        active() {
            this.page = 2;
            this.list1 =[]
        },
    },
    destroyed() {
        window.removeEventListener("scroll", this.scrollEvent, true);
        this.timer = null;
    },
};
</script>

<style lang="scss" scoped>
.FindTab {
    margin-top: 0.5rem;
    padding-bottom: 0.6rem;
}
</style>